<template>
	<!-- 播放控件 -->
	<view class="EarGrinding-control">
		<view class="bg-white padding flex align-center justify-between">
			<view class="EarGrinding-cinfo flex align-center">
				<view class="round bg-grey">
					<image :src="value.cover" mode="aspectFill"></image>
				</view>
				<view class="margin-left-sm">
					<view class="text-cut">{{value.name || '作品名'}}</view>
					<view class="text-cut margin-top-xs text-sm text-grey">{{value.author || '作者'}}</view>
				</view>
			</view>
			<view class="EarGrinding-ccontrols margin-left flex align-center">
				<view @click="$emit('handle','left')" class="flex align-center justify-center">
					<image src="@/static/audio/left.png" mode="aspectFill"></image>
				</view>
				<view @click="$emit('handle','center')"  class="margin-left-xs flex align-center justify-center">
					<image v-if="value.status" src="@/static/audio/pause.png" mode="aspectFill"></image>
					<image v-else src="@/static/audio/bofang.png" mode="aspectFill"></image>
				</view>
				<view @click="$emit('handle','right')"  class="margin-left-xs flex align-center justify-center">
					<image src="@/static/audio/right.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default{
		props:{
			value:{type:Object,default:()=>{
				
			}}
		}
	}
</script>

<style lang="scss" scoped>
	.EarGrinding-control {
		height: 160upx;
			
		>view {
			position: fixed;
			bottom: 0;
			left: 0;
			height: 160upx;
			width: 100vw;
			box-sizing: border-box;
			
			.EarGrinding-cinfo {
				flex: auto;
			
				>view:first-child {
					width: 100upx;
					height: 100upx;
					overflow: hidden;
			
					image {
						width: 100%;
						height: 100%;
					}
				}
			
				>view:last-child {
					flex: auto;
				}
			}
			.EarGrinding-ccontrols {
					>view {
						width: 60upx;
						height: 60upx;
			
						image {
							width: 100%;
							height: 100%;
						}
					}
			
					>view:nth-child(2n+1) {
						width: 50upx;
						height: 50upx;
					}
				}
		}
	}
			
	
	
</style>